<template>
  <div class="app-container">
    <!-- 条件查询区域开始 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row>
          <!-- 任务名称 -->
          <el-col :span="6">
            <el-form-item
              :label="$t('jobDefine.jobCnName')"
              prop="likeJobCnName"
            >
              <el-input
                v-model="queryParams.likeJobCnName"
                :placeholder="$t('jobDefine.jobNameRequired')"
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
              />
            </el-form-item>
          </el-col>
          <!-- 任务分类 -->
          <el-col :span="6">
            <el-form-item :label="$t('jobDefine.classify')" prop="classify">
              <jmash-select
                v-model="queryParams.classify"
                :data="Dict.jobClassifyDict.values"
                :placeholder="$t('jobDefine.classifyRequired')"
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- 状态 -->
          <el-col :span="6">
            <el-form-item :label="$t('jobDefine.enable')" prop="enable">
              <jmash-select
                v-model="queryParams.enable"
                :placeholder="$t('jobDefine.enableRequired')"
                :data="Dict.enableDict.values"
                clearable
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
              />
            </el-form-item>
          </el-col>
          <!-- 查询 重置 -->
          <el-col :span="6">
            <el-form-item class="search-btn">
              <el-button type="primary" @click="tableHooks.handleQuery()">
                {{ $t("common.search") }}
              </el-button>
              <el-button @click="tableHooks.resetQuery()">{{
                $t("common.reset")
              }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="clear"></div>
    </div>
    <!-- 条件查询区域结束 -->

    <el-card shadow="never" class="table-container">
      <!-- 按钮开始 -->
      <template #header>
        <el-row>
          <el-col :span="17">
            <!-- 新增 -->
            <el-button
              type="primary"
              v-hasPerm="['jobs:job_define:add']"
              @click="handleAdd"
            >
              {{ $t("common.add") }}
            </el-button>
            <!-- 批量删除 -->
            <el-button
              type="primary"
              v-hasPerm="['jobs:job_define:delete']"
              @click="tableHooks.deleteRecords()"
            >
              {{ $t("common.batchDelete") }}
            </el-button>
          </el-col>
          <el-col :span="7" class="container-float">
            <!-- 固定列表 -->
            <jmash-column-select
              v-model="tableLabel"
              label-name="jobs/job-define"
            />
          </el-col>
        </el-row>
      </template>
      <!-- 按钮结束 -->

      <!-- 表格开始 -->
      <jmash-table
        ref="multipleTableRef"
        row-key="jobName"
        :list-loading="listLoading"
        :data="tableData"
        :table-label="tableLabel"
        @selection-change="tableSelected"
        @sort-change="handleSort"
      >
        <!-- 状态 -->
        <template #enable="scope">
          <el-switch
            v-model="scope.data.row.enable"
            @change="
              tableHooks.enableRecord(scope.data.row, scope.data.row.enable)
            "
          />
        </template>
        <template #operation="scope">
          <!-- 编辑 -->
          <span
            class="el-button-color"
            v-hasPerm="['jobs:job_define:update']"
            @click="handleEdit(scope.data.row)"
          >
            {{ $t("common.edit") }}
          </span>
          <!-- 删除 -->
          <span
            class="el-button-color dropdown-left"
            v-hasPerm="['jobs:job_define:delete']"
            @click="tableHooks.deleteRecord(scope.data.row)"
          >
            {{ $t("common.delete") }}
          </span>
          <!-- 查看详情 -->
          <span
            v-hasPerm="['jobs:job_define:view']"
            class="el-button-color dropdown-left"
            @click="handleInfo(scope.data.row)"
          >
            {{ $t("common.view") }}
          </span>
        </template>
      </jmash-table>
      <template #footer>
        <jmash-pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:current-page="queryParams.curPage"
          v-model:page-size="queryParams.pageSize"
          @pagination="tableHooks.getList()"
        />
      </template>
    </el-card>
    <!-- 表格结束 -->
  </div>
</template>
<script setup lang="ts">
import { type Ref, ref,onActivated } from "vue";
import { type TableColumn, type TableSort, useTableHooks } from "jmash-core";
import { useRouter } from "vue-router";
const router = useRouter();
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import type { JobDefineReq, JobDefineModel } from "@/api/jobs/job-define/types";
import { jobDefineApi } from "@/api/jobs/job-define/index";
import { Dict } from "@/api/jobs/index";
//任务分类
Dict.jobClassifyDict.useValues();
const queryParams = ref<JobDefineReq>({});
const {
  tableHooks,
  multipleTableRef,
  queryFormRef,
  listLoading,
  tableData,
  total,
} = useTableHooks(t, jobDefineApi, queryParams);
// 表格头部标题
let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "jobDefine.jobCnName",
    prop: "jobCnName",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "jobDefine.classify",
    prop: "classify",
    width: "110",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "jobDefine.instanceName",
    prop: "instanceName",
    width: "350",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "jobDefine.weight",
    prop: "weight",
    width: "110",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "jobDefine.eventName",
    prop: "eventName",
    width: "160",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "jobDefine.enable",
    prop: "enable",
    width: "90",
    sortable: "custom",
    isColumn: true,
    slotName: "enable",
    columnType: "slot",
  },
  {
    label: "common.operate",
    width: "200",
    slotName: "operation",
    columnType: "slot",
    fixed: "right",
    isColumn: true,
  },
]);

// 新增
function handleAdd() {
  router.push({ path: "/jobs-info/job-define/editInfo" });
}

// 编辑
function handleEdit(row: JobDefineModel) {
  router.push({
    path: "/jobs-info/job-define/editInfo",
    query: { entityKey: row.jobName },
  });
}

// 详情
function handleInfo(row: JobDefineModel) {
  router.push({
    path: "/jobs-info/job-define/defineInfo",
    query: { jobName: row.jobName },
  });
}
//行选择
function tableSelected(value: JobDefineModel[]) {
  tableHooks.selectionRows.value = value;
}

//处理排序
function handleSort(sort: TableSort) {
  tableHooks.handleSort(sort.prop, sort.order);
}

//查询数据.
onActivated(() => {
  tableHooks.getList();
});
</script>
